import React, { Component } from 'react';
import {Motion, spring} from 'react-motion';

class Switch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }
  handleSwitch = () => {
    this.setState({open: !this.state.open});
  }
  render() { 
    return (
      <Motion style={{x: spring(this.state.open ? 50 : 0)}}>
        {
          ({x}) => (
            <div className="demo">
              <div className="demo-block"
                onClick={this.handleSwitch}
                style={{transform: `translateX(${x}px)`, background: this.state.open ? 'orange' : '#ccc'}}
              ></div>
            </div>
          )
        }
      </Motion>
    );
  }
}
 
export default Switch;